<script setup>
import {useRootSetting} from '@/hooks/setting/useRootSetting';
import AppLogo from "@/components/AppLogo.vue";
import Sidebar from "@/components/Sidebar.vue";
import AppFold from "@/components/AppFold.vue";

const {appConfig} = useRootSetting();
</script>

<template>
  <div class="sidebar-container" :class="{ 'hide-sidebar': appConfig.collapseMenu }"
       v-show="(appConfig.sidebarMode !== 'horizontal')">
    <AppLogo/>
    <Sidebar mode="vertical"/>
    <div class="sidebar-fold"
         v-if="(appConfig.sidebarMode === 'blend')">
      <AppFold/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.sidebar-container {
  .sidebar-fold {
    display: flex;
    justify-content: center;
    padding: 10px;
    border-top: 1px solid #E4E7EDFF;
    font-size: 18px;
  }
}
</style>
